import React, { Component } from 'react';
import { StyleSheet, View, ScrollView, TouchableOpacity, Text, Alert, Image } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
import TableColumns from '../constants/TableColumns';
import TableData from '../constants/TableData';


export default class MyTable extends Component {
  constructor(props) {
    super(props);
    let data = this.setData()
    this.state = {
      ...data,
      downSort: true,
    }
  }

  setData = ()=>{
    let tableData = [], tableHead = [], widthArr = []

    tableHead.push('编号')
    widthArr.push(70)

    TableColumns.forEach(item => {
      tableHead.push(item.title)
      widthArr.push(item.width)
    });

    for (let i = 0; i < TableData.length; i += 1) {
      let item = TableData[i]
      const rowData = [];
      rowData.push(i+1);
      for (const key in item) {
          const content = item[key];
          rowData.push(content);
      }
      tableData.push(rowData);
    }

    return { tableData, widthArr, tableHead}
  }

  _alertIndex=(index)=> {
    Alert.alert(`This is ${index}`);
  }

  buttonItem = (data, index, cellIndex) => (
    <TouchableOpacity onPress={() => this._alertIndex(data)}>
      <View style={{...styles.btn,width:this.state.widthArr[cellIndex]}}>
        <Text style={styles.btnText}>{data}</Text>
      </View>
    </TouchableOpacity>
  );

  imageItem = (data, index, cellIndex) => (
      <View style={{flex:1,width:this.state.widthArr[cellIndex],justifyContent:"center",alignItems:'center'}}>
        <Image source={{uri: `https://racing.hkjc.com/racing/content/Images/RaceColor/${data}.gif`}} 
          style={{width: 30, height: 30}}>
        </Image>
      </View>
  );

  sortHeaderItem = (data, index) => (
    <TouchableOpacity onPress={() => {
      this.setState({
        downSort:!this.state.downSort,
        tableData:this.state.tableData.reverse()
      })
    }}>
      <View style={{...styles.btnHeader,width:this.state.widthArr[index]}}>
        <Text style={styles.btnText}>{data}</Text>
        
      </View>
    </TouchableOpacity>
  );

  renderItem=(cellData, index, cellIndex)=>{
    switch (cellIndex) {
      case 2:
        return this.imageItem(cellData, index, cellIndex)
        break;
      case 3:
        return this.buttonItem(cellData, index, cellIndex)
        break;
    
      default:
        return cellData
        break;
    }
  }

  render() {
    const state = this.state;
    let tableData = state.tableData
    
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <TableWrapper style={[styles.header,]}>
                {
                  state.tableHead.map((cellData, index) => (
                    <Cell key={index} 
                      data={index === 0 ? this.sortHeaderItem(cellData, index) : cellData} 
                      textStyle={styles.text}
                      style={{width:state.widthArr[index]}}
                      />
                  ))
                }
              </TableWrapper>
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {
                  tableData.map((rowData, index) => (
                    <TableWrapper key={index} style={[styles.row, index%2 && {backgroundColor: 'white'}]}>
                      {
                        rowData.map((cellData, cellIndex) => (
                          <Cell key={cellIndex} 
                            data={this.renderItem(cellData, index, cellIndex)} 
                            textStyle={styles.text}
                            style={{width:state.widthArr[cellIndex]}}
                            />
                        ))
                      }
                    </TableWrapper>
                  ))
                }
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  header: { height: 50, backgroundColor: '#537791', flexDirection: 'row', },
  text: { textAlign: 'center', fontWeight: '100' },
  dataWrapper: { marginTop: -1 },
  row: { height: 40, backgroundColor: '#E7E6E1', flexDirection: 'row', },
  btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },
  btnHeader: { width: 58, height: 50, backgroundColor: '#c8e1ff',  borderRadius: 2,justifyContent:'center' },
  btnText: { textAlign: 'center', color: '#fff' }
});